<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .button_admin_status {
            width: 100%;
            height: 25px;
            border-radius: 3px;
            cursor: pointer;
            display: inline-block;
            border: none;
            background: none;
            position: relative;
        }

        .button_admin_status button {
            width: 100%;
            height: 100%;
            padding: 0;
            border: none;
            background: none;
            cursor: pointer;
            display: flex;
            /* 使用 flex 布局 */
            align-items: center;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
        }

        .button_admin_status i {
            font-size: 16px;
        }

        .dropdown-menu-admin {
            display: none;
            position: fixed;
            background-color: #f9f9f9;
            min-height: 38px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            padding: 5px;
            border-radius: 4px;
            white-space: nowrap;
            text-align: center;
            transform: translateX(-18%);
            /* 水平居中对齐 */
        }

        .dropdown-item-admin {
            display: inline-block;
            padding: 5px;
            cursor: pointer;
            width: auto;
            text-align: center;
            margin: 0 2px;
        }

        .dropdown-item-admin:hover {
            background-color: #e0d9d9;
        }

        .dropdown-item-admin i {
            font-size: 18px;
        }

        .show-admin {
            display: block;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                <c:choose>
                    <c:when test="${review.status_admin == 0}">
                        <span class="label label-warning" style="background-color: #c6c4c1">未审核</span>
                    </c:when>
                    <c:when test="${review.status_admin == 1}">
                        <span class="label label-success">已通过</span>
                    </c:when>
                    <c:otherwise>
                        <span class="label label-danger">拒绝</span>
                    </c:otherwise>
                </c:choose>
            </td>
            <td style="position: relative;">
                <div class="button_admin_status" data-review-id="${review.id}">
                    <button class="toggle-dropdown" type="button" style="background-color: white;border: none">
                        <i class="status-icon fa-solid fa-spinner"></i>
                    </button>
                    <div class="dropdown-menu-admin">
                        <div data-status="1" class="dropdown-item-admin">
                            <i class="fa-solid fa-square-check" style="color: #63E6BE;"></i>
                        </div>
                        <div data-status="3" class="dropdown-item-admin">
                            <i class="fa-solid fa-square-xmark" style="color: #ef9797;"></i>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.button_admin_status').forEach(function(buttonContainer) {
                const toggleButton = buttonContainer.querySelector('.toggle-dropdown');
                const dropdownMenu = buttonContainer.querySelector('.dropdown-menu-admin');
                const statusIcon = buttonContainer.querySelector('.status-icon');
                const statusCell = buttonContainer.closest('tr').querySelector('td:nth-last-child(2)');
                const reviewId = buttonContainer.dataset.reviewId;

                // 获取初始状态并设置正确的图标
                function setInitialIcon() {
                    const statusLabel = statusCell.querySelector('.label');
                    let iconClass, iconColor;

                    if (statusLabel.classList.contains('label-success')) {
                        // 状态为已通过(1)
                        iconClass = 'fa-square-check';
                        iconColor = '#63E6BE';
                    } else if (statusLabel.classList.contains('label-warning')) {
                        // 状态为未审核(0)
                        iconClass = 'fa-spinner';
                        iconColor = '#c6c4c1';
                    } else {
                        // 状态为拒绝(3或其他)
                        iconClass = 'fa-square-xmark';
                        iconColor = '#ef9797';
                    }

                    statusIcon.className = 'status-icon fa-solid ' + iconClass;
                    statusIcon.style.color = iconColor;
                }

                // 初始化时设置正确的图标
                setInitialIcon();

                // 检查初始状态并禁用按钮
                function checkAndDisableButton() {
                    const statusLabel = statusCell.querySelector('.label');
                    if (statusLabel.classList.contains('label-warning')) {
                        return;
                    }
                    toggleButton.disabled = true;
                    toggleButton.style.cursor = 'not-allowed';
                    dropdownMenu.remove();
                }

                // 初始化时检查状态
                checkAndDisableButton();

                // 更新状态显示的函数
                function updateStatusDisplay(status) {
                    let labelClass, labelText, iconClass, iconColor;
                    
                    if (status === '1') {
                        labelClass = 'label-success';
                        labelText = '已通过';
                        iconClass = 'fa-square-check';
                        iconColor = '#63E6BE';
                    } else if (status === '0') {
                        labelClass = 'label-warning';
                        labelText = '未审核';
                        iconClass = 'fa-spinner';
                        iconColor = '#c6c4c1';
                    } else {
                        labelClass = 'label-danger';
                        labelText = '拒绝';
                        iconClass = 'fa-square-xmark';
                        iconColor = '#ef9797';
                    }

                    // 构建 HTML 字符串
                    let styleAttr = labelClass === 'label-warning' ? ' style="background-color: #c6c4c1"' : '';
                    let htmlString = '<span class="label ' + labelClass + '"' + styleAttr + '>' + labelText + '</span>';
                    
                    // 更新状态显示
                    statusCell.innerHTML = htmlString;
                    
                    // 更新图标
                    statusIcon.className = 'fa-solid ' + iconClass;
                    statusIcon.style.color = iconColor;
                }

                toggleButton.addEventListener('click', function (event) {
                    event.stopPropagation();
                    // 关闭其他所有下拉菜单
                    document.querySelectorAll('.dropdown-menu-admin.show-admin').forEach(menu => {
                        if (menu !== dropdownMenu) {
                            menu.classList.remove('show-admin');
                        }
                    });
                    dropdownMenu.classList.toggle('show-admin');
                    
                    if (dropdownMenu.classList.contains('show-admin')) {
                        const buttonRect = this.getBoundingClientRect();
                        dropdownMenu.style.top = (buttonRect.bottom + window.scrollY) + 'px';
                        dropdownMenu.style.left = (buttonRect.left + window.scrollX) + 'px';
                    }
                });

                dropdownMenu.addEventListener('click', function (event) {
                    const dropdownItem = event.target.closest('.dropdown-item-admin');
                    if (dropdownItem) {
                        const status = dropdownItem.getAttribute('data-status');
                        
                        $.ajax({
                            url: '/your-context-path/updateStatus',
                            method: 'POST',
                            data: {
                                status: status,
                                reviewId: reviewId  // 添加 reviewId 参数
                            },
                            success: function(response) {
                                if (response.success) {
                                    updateStatusDisplay(status);
                                    dropdownMenu.classList.remove('show-admin');
                                    toggleButton.disabled = true;
                                    toggleButton.style.cursor = 'not-allowed';
                                    dropdownMenu.remove();
                                } else {
                                    alert('更新状态失败：' + response.message);
                                }
                            },
                            error: function(xhr, status, error) {
                                alert('请求失败：' + error);
                            }
                        });
                        
                        event.stopPropagation();
                    }
                });
            });

            // 点击页面其他地方关闭所有下拉菜单
            document.addEventListener('click', function () {
                document.querySelectorAll('.dropdown-menu-admin.show-admin').forEach(menu => {
                    menu.classList.remove('show-admin');
                });
            });
        });
    </script>
</body>

</html>